import axios from '@/utils/request'
const STATUS = {
  '-1': '已取消',
  0: '未支付',
  1: '已支付'
}
const TYPE = {
  'faceid-authority-fee': '人脸核身',
  'onboard-fee': '入职',
  'insurance-fee': '保险',
  'blackhole-fee': '报销',
  'penalty-fee': '扣罚'
}

export default {
  Fee: {
    list: {
      export: {
        query: {
          '@display': `{
            'id' : 'entity.getId()',
            'store' : 'entity.getStaff().getStore().getName()',
            'staff' : 'entity.getStaff().getName()',
            'payer' : 'entity.getPayer().getUsername()',
            'receiver' : 'entity.getReceiver().getUsername()',
            'amount' : 'entity.getAmount()',
            'status' : '${JSON.stringify(STATUS)}[entity.getStatus()]',
            'type' : '${JSON.stringify(TYPE)}[entity.getType()]',
            'comment' : 'entity.getComment()',
            'paidTime' : 'entity.getPaidTime().format("Y-m-d H:i:s")',
            'createdTime' : 'entity.getCreatedTime().format("Y-m-d H:i:s")'
          }`,
          limit: 10000000
        },
        label: {
          'id': 'id',
          'store': '门店',
          'staff': '店员',
          'payer': '付款方',
          'receiver': '收款方',
          'amount': '金额',
          'status': '状态',
          'type': '类型',
          'comment': '备注',
          'paidTime': '支付时间',
          'createdTime': '创建时间'
        }
      },
      query: {
        '@order': 'entity.id|DESC',
        '@expands': '["entity.staff"]'
      },
      list_filter: {
        'staff.store.id': () => {
          return axios
            .get(`/manage/stores`)
            .then(res =>
              Object.assign({ __label: '门店' },
                ...res.data.map(v => { return { [v.id]: v.name } })))
        },
        'role': {
          expression: 'entity.getStaff().getRole().getId() == ":value"',
          label: '角色',
          type: 'remote-select',
          data: [],
          remoteMethod: (query, context) => {
            axios
              .get(`/manage/roles`, { params: {
                '@filter': `entity.getName() matches "${query}"`
              }})
              .then(res => {
                context.data = res.data.map(v => { return { value: v.id, label: v.name + '(' + v.store.__toString + ')' } })
              })
          }
        },
        name: {
          expression: `entity.getStaff().getName() matches ":value" || entity.getStaff().getUser().getUsername() matches ":value"`,
          label: '员工名/电话',
          type: 'input'
        },
        staffId: {
          expression: `entity.getStaff().getId() == ":value"`,
          label: '员工id',
          type: 'input'
        },
        status: Object.assign({ __label: '状态' }, STATUS),
        type: Object.assign({ __label: '类型' }, TYPE)
      },
      list_display: [
        'id',
        { property: 'staff.__metadata.store.__toString', label: '门店' },
        'staff',
        { property: 'store', label: '额外信息' },
        { property: 'payer', label: '付款方' },
        { property: 'receiver', label: '收款方' },
        { property: 'amount', label: '金额', editable: true },
        {
          property: 'status',
          component: {
            props: ['data'],
            data() {
              return {
                status: STATUS
              }
            },
            render(h) {
              return <div>{this.status[this.data]}</div>
            }
          }
        },
        {
          property: 'type',
          component: {
            props: ['data'],
            data() {
              return {
                type: TYPE
              }
            },
            render(h) {
              return <div>{this.type[this.data]}</div>
            }
          }
        },
        'comment',
        'paidTime',
        'createdTime'
      ]
    },
    form: {
      fields: [
        {
          property: 'store',
          field_options: { label: '门店' },
          required: false,
          component: {
            props: ['form', 'property'],
            data() {
              return { data: [] }
            },
            created() {
              axios.get(`/manage/stores`, {
                params: {
                  'limit': 1000000
                }
              }).then((res) => {
                this.data = res.data
              })
            },
            render(h) {
              return (
                <el-select v-model={this.form[this.property]} clearable filterable onChange={() => { this.form['staff'] = null }}>{
                  Object.assign(this.data).map(v => {
                    return <el-option key={v.id} label={v.name} value={v.id} />
                  })
                }</el-select>
              )
            }
          }
        },
        {
          property: 'staff',
          required: false,
          component: {
            props: ['form', 'property'],
            data() {
              return { data: [] }
            },
            methods: {
              setOptions(value) {
                if (value) {
                  axios.get(`/manage/staffs`, {
                    params: {
                      '@filter': `entity.getStore().getId() == ${value}`,
                      'limit': 1000000
                    }
                  }).then((res) => {
                    this.data = res.data
                  })
                } else {
                  this.data = []
                }
              }
            },
            watch: {
              'form.store': {
                handler(value, oldValue) {
                  this.setOptions(value)
                },
                immediate: true
              }
            },
            render(h) {
              return (
                <el-select v-model={this.form[this.property]} clearable filterable>{
                  Object.assign(this.data).map(v => {
                    return <el-option key={v.id} label={v.name + '(' + v.phone + ')'} value={v.id} />
                  })
                }</el-select>
              )
            }
          }
        },
        {
          property: 'payer',
          field_options: { label: '付款方' },
          component: {
            props: ['form', 'property'],
            data() {
              return { data: [] }
            },
            methods: {
              remoteMethod(query) {
                if (query) {
                  axios.get(`/manage/users`, {
                    params: {
                      '@filter': `entity.getEnabled() == true 
                               && (entity.getUsername() matches "${query}" || entity.getId() == "${query}")`,
                      'limit': 1000000
                    }
                  }).then((res) => {
                    this.data = res.data
                  })
                } else {
                  this.data = []
                }
              }
            },
            render(h) {
              return (
                <el-select v-model={this.form[this.property]}
                  filterable
                  remote
                  clearable
                  placeholder='请输入关键词'
                  remote-method={(query) => { this.remoteMethod(query) }}>{
                    Object.assign(this.data).map(v => {
                      return <el-option key={v.id} label={v.id + ':' + v.username} value={v.id} />
                    })
                  }</el-select>
              )
            }
          }
        },
        {
          property: 'receiver',
          field_options: { label: '收款方' },
          component: {
            props: ['form', 'property'],
            data() {
              return { data: [] }
            },
            methods: {
              remoteMethod(query) {
                if (query) {
                  axios.get(`/manage/users`, {
                    params: {
                      '@filter': `entity.getEnabled() == true 
                               && (entity.getUsername() matches "${query}" || entity.getId() == "${query}")`,
                      'limit': 1000000
                    }
                  }).then((res) => {
                    this.data = res.data
                  })
                } else {
                  this.data = []
                }
              }
            },
            render(h) {
              return (
                <el-select v-model={this.form[this.property]}
                  filterable
                  remote
                  clearable
                  placeholder='请输入关键词'
                  remote-method={(query) => { this.remoteMethod(query) }}>{
                    Object.assign(this.data).map(v => {
                      return <el-option key={v.id} label={v.id + ':' + v.username} value={v.id} />
                    })
                  }</el-select>
              )
            }
          }
        },
        { property: 'amount', field_options: { label: '金额' }},
        {
          property: 'type',
          component: {
            props: ['form', 'property'],
            render(h) {
              return (
                <el-select v-model={this.form[this.property]} filterable>{
                  Object.keys(TYPE).map(v => {
                    return <el-option key={v} label={TYPE[v]} value={v} />
                  })
                }</el-select>
              )
            }
          }
        },
        { property: 'comment', type: 'textarea' }
      ]
    }
  }
}

